import React, { PureComponent } from 'react'
import  { connect } from 'react-redux'
import {TopicWrapper,TopItem} from '../style'
class Topic extends PureComponent {
    render() {
         return (
            <TopicWrapper> 
                {
                    this.props.list.map((item)=>{
                        return (
                            <TopItem key={item.get('id')}>
                             <img className="toppic-pic"  alt={item.get('imgUrl')} src={item.get('imgUrl')} />
                            {item.get('title')}
                        </TopItem> 
                        )
                    })
                }  
            </TopicWrapper>
        )
    }
}

const mapState = (state) =>({
   list: state.get('home').get('topicList')
})

export default connect(mapState,null)(Topic)